{% extends "base/base_layout.html" %}
{% load static %}
{% block sidebar_option %}
    sidebar-collapse
{% endblock %}
{% block extra_css %}
    <!-- DataTables -->
    <link rel="stylesheet" href="{% static "adminlte/plugins/datatables-bs4/dataTables.bootstrap4.min.css" %}">
{% endblock %}
{% block content %}
    <div class="content-wrapper">
        <div class="content-header">
        </div>
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <h3 class="page-header"><strong>API监控</strong>- {{ package }}</h3>
                            <div id="messages"></br>每10s刷新一次.</div>
                            <div align="right">Data Snip: <input type="text" value="100"
                                                                 oninput="change_snip(this.value)"></div>
                            <br/>
                            <div class="table-responsive">
                                <table id="autotbl" class="table table-bordered table-hover table-striped"
                                       style="width:100%">
                                    <thead>
                                    <tr>
                                        <th>名称</th>
                                        <th>类</th>
                                        <th>方法</th>
                                        <th>ARGUMENTS</th>
                                        <th>结果</th>
                                        <th>返回值</th>
                                        <th>CALLED FROM</th>
                                    </tr>
                                    </thead>
                                    <tfoot>
                                    <tr>
                                        <th>名称</th>
                                        <th>类</th>
                                        <th>方法</th>
                                        <th>ARGUMENTS</th>
                                        <th>结果</th>
                                        <th>返回值</th>
                                        <th>CALLED FROM</th>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block extra_scripts %}
    <!-- DataTables -->
    <script src="{% static "adminlte/plugins/datatables/jquery.dataTables.min.js" %} "></script>
    <script src="{% static "adminlte/plugins/datatables-bs4/dataTables.bootstrap4.min.js" %}"></script>
    <script type="text/javascript">
        var snip = 100;
        var tbl;

        function change_snip(val) {
            snip = parseInt(val);
            tbl.ajax.reload();
        }

        $(document).ready(function () {
            $.fn.dataTable.ext.errMode = 'none';
            tbl = $('#autotbl').DataTable({
                ajax: '/live_api/?hash={{ hash }}&stream=1',
                deferRender: true,
                scroller: true,
                scrollX: true,
                searching: true,
                paging: false,
                info: true,
                columns: [
                    {data: "name"},
                    {data: "class"},
                    {data: "method"},
                    {data: "arguments"},
                    {data: "result"},
                    {data: "returnValue"},
                    {data: "calledFrom"}
                ],
                columnDefs: [{
                    targets: [3, 4, 5],
                    render: function (data, type, row) {
                        if (data && JSON.stringify(data).length > snip)
                            return JSON.stringify(data).slice(0, snip) + "...";
                        return JSON.stringify(data)
                    }
                }]
            });
            setInterval(function () {
                tbl.ajax.reload();
            }, 10000);
        });

    </script>
{% endblock %}